  
<!-- 用户管理模块,2018-12-14,作者:zc-->
<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-tickets"></i>
                    部门管理
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
    
        <div class="container"   v-loading="listLoading">
  <!-- 页面内容区begin -->
            <div class="wrapper">
 
                <div style=" width:25%;float:left;">
                                <el-tree
                                    class="filter-tree"
                                    show-checkbox
                                    :data="data2"
                                    :props="defaultProps"
                                    default-expand-all 
                                    @check="handleNodeClick"                        
                                    ref="tree2">
                                </el-tree>                                               
                    </div>  
       
                <div style=" width:75%;float:right;">
                        <!-- 搜索区-->
                    <div class="handle-box"> 
                        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
                        <el-form :inline="true"    class="demo-form-inline" >
                                <el-form-item label="部门ID">
                                    <el-input v-model="search.userid" style=""  placeholder="部门ID" size="mini"></el-input>
                                </el-form-item>
                                <el-form-item label="部门名称">
                                    <el-input v-model="search.username" placeholder="部门名称" size="mini"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary"   round icon="el-icon-search">搜索</el-button>                           
                                </el-form-item>
                            </el-form>
                        </el-col>
                    </div>
                    <!--新增按钮-->
                    <template>                             
                        <div class="btn">
                                <el-button type="success" icon="el-icon-circle-plus-outline" @click="handleAdd" size="mini" round>新增</el-button>      
                                <el-button type="danger" icon="el-icon-delete" @click="handleDeleteList" size="mini" round>删除</el-button>
                        </div>
                    </template>              
                        <template>
                            <!-- 表格 -->
                            <el-table :data="tabbleDta" border   style="width:100%">
                                <el-table-column type="selection" width="55">
                                </el-table-column>       
                                <el-table-column prop="deptname" label="部门名称">
                                </el-table-column>
                                <el-table-column prop="deptcode" label="部门编码">
                                </el-table-column>
                                <el-table-column prop="addtime" label="添加时间">
                                </el-table-column>
                                <el-table-column prop="addperson" label="添加人">
                                </el-table-column>
                                <el-table-column  fixed="right" label="操作" width="150">
                                    <template slot-scope="scope">
                                        <el-button size="small" @click="handleEdit(scope.$index,scope.row)">编辑</el-button>
                                        <el-button size="small" @click="handleEdit(scope.$index,scope.row)">删除</el-button>
                                    </template>
                                </el-table-column>           
                            </el-table>
                            <div class="pagination">   
                                <el-pagination
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange"
                                    :current-page="currentPage"
                                    :page-sizes="[10, 20, 30, 40]"
                                    :page-size="100"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    :total="total">
                                </el-pagination>
                            </div>
                        </template> 
                        </div>
                    </div>
        </div>
        <adeptadd ref="dtptd"  v-bind:DeptTree='DeptTree'></adeptadd>
    </div>
</template>

<script>

import adeptadd from './deptAdd';

export default {
    
    data(){
        return{
            DeptTree:[],
            // 列表数据
            tabbleDta:[],
            // 列表Loading加载
            listLoading: true,
            search:{},
            currentPage:0,
            pageSize:10,
            total:0 ,                 
            filterText: '',
            data2:[],
            defaultProps: {
                children: 'children',
                label: 'deptname'
            }
        }
    },
    mounted(){
    this.listLoading = true;
     //初始化加载数据
    this.getResult();
     this.gettree();
    },
    methods:{
        // 获取当前点击的树进行数据查询
        handleNodeClick(nodedata) {
            var _this = this;
           if(nodedata.deptid!=""||nodedata.deptid!=null){
                _this.$api.Deptgetid({'parentid':nodedata.deptid}).then((res)=>{
                _this.listLoading = false;
                if(res.result =='ok'){
                     _this.tabbleDta =res.data;
                }  
                }).catch((err)=>{
                    _this.$message({message:res.msg,type:'error'});
                });
           } 
      },
        gettree(){
            var _this = this;
            _this.$api.Depttree().then((res)=>{
                _this.listLoading = false;
               if(res.result =='ok'){
                    _this.data2 =res.data;
               }    
           }).catch((err)=>{
               _this.$message({
                   message:'数据获取失败',
                   type:'error'
               });
           });

         
        },
        getTableData(){
           // this.tabbleDta =this.tabbleDta.slice()
        },
        // 获取列表数据
        getResult(){
           // DeptAdd,DeptEdit,DeptList,DeptDelete
           var _this = this;
           _this.$api.DeptList().then((res)=>{
                _this.listLoading = false;
               if(res.result =='ok'){
                    _this.tabbleDta = res.data;
               }    
           }).catch((err)=>{
               _this.$message({
                   message:'数据获取失败',
                   type:'error'
               });
           });
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
        // 修改用户
        handleEdit(){

        },
        // 添加用户
        handleAdd(){
            
            var trid =this.$refs.tree2.getCheckedNodes()||"";
            if(trid ==""){
                this.$message({message:'请选择左边树,添加部门',type:'error'});
                return;
            }
              this.$refs['dtptd'].Visible =true; 
              this.DeptTree =  this.$refs.tree2.getCheckedNodes();
        },
        // 删除
        handleDeleteList(){

        }
    },components:{
       adeptadd
    }
}
</script>

<style scoped>
 
    .btn{
        margin-bottom: 1rem;
        
    }
 
    
 
 
</style>
 